<mat-drawer-container class="w-full h-full" [autosize]="true">
  <mat-drawer #drawer class="w-64" [mode]="isMobile() ? 'over' : 'side'"
    [(opened)]="sideMenuOpened"
    ngmResizer [resizerWidth]="230">
    <div class="z-10 flex flex-col max-w-xs h-full p-2 md:p-4 md:pr-0">
      <ul class="pac-nav__tab-bar flex-1 py-2 rounded-lg mr-4">
        @for (e of menus(); track $index) {
          <li
            class="pac-nav__tab flex justify-start items-center px-4 py-2 cursor-pointer"
            [routerLink]="e.link"
            [routerLinkActiveOptions]="{ exact: false }"
            routerLinkActive
            #rla="routerLinkActive"
            [class.active]="rla.isActive"
          >
            <mat-icon *ngIf="e.icon" displayDensity="cosy" fontSet="material-icons-round">{{ e.icon }}</mat-icon>
            <span class="ml-2">
              {{ 'PAC.MENU.' + e.label | translate: { Default: e.label } }}
            </span>
          </li>
        }
      </ul>
    </div>

    <div ngmResizerBar resizerBarPosition="right"
        cdkDrag
        cdkDragLockAxis="x"
    ></div>
  </mat-drawer>
  <mat-drawer-content [@routeAnimations]="o.isActivated && o.activatedRouteData?.title"
    class="pac-nav__router relative flex-1">
    <router-outlet #o="outlet"></router-outlet>

    <ngm-drawer-trigger class="absolute -left-2 top-1/2 -translate-y-1/2 z-40" [(opened)]="sideMenuOpened" 
      [matTooltip]="'PAC.KEY_WORDS.SettingsNavigation' | translate: {Default: 'Settings Navigation'}"
      matTooltipPosition="after" />
  </mat-drawer-content>
</mat-drawer-container>
